import noResultsSource from "assets/img/no_results.svg";
import { Fragment } from "react";
import { Canvas, Story, Meta } from "@storybook/addon-docs";
import { Box, Image, Stack, Text } from "metabase/ui";

export const args = {
  width: 120,
  height: 120,
  fit: "cover",
  position: "center",
  src: noResultsSource,
  alt: "No search results",
};

export const argTypes = {
  fit: {
    control: {
      type: "inline-radio",
      options: ["cover", "contain", "fill", "none", "scale-down"],
    },
  },
  position: {
    control: {
      type: "inline-radio",
      options: ["top left", "top", "center", "bottom", "bottom right"],
    },
  },
  src: {
    control: { type: "file", accept: "image/jpeg,image/png,image/svg+xml" },
  },
};

<Meta
  title="Data display/Image"
  component={Image}
  args={args}
  argTypes={argTypes}
/>

# Image

Our themed wrapper around [Mantine Image](https://v6.mantine.dev/core/image/).

## Docs

- [Mantine Image Docs](https://v6.mantine.dev/core/image/)

## Examples

export const DefaultTemplate = args => (
  <Box maw="20rem">
    <Image {...args} />
  </Box>
);

export const Default = DefaultTemplate.bind({});

<Canvas>
  <Story name="Default">{Default}</Story>
</Canvas>

### Image position

export const BackgroundPosition = DefaultTemplate.bind({});
BackgroundPosition.args = {
  width: 80,
  position: "top left",
};

<Canvas>
  <Story name="BackgroundPosition">{BackgroundPosition}</Story>
</Canvas>
